import { Button, Flex } from 'antd';

import CardData from './modules/CardData';
import CreativityBanner from './modules/CreativityBanner';
import HeaderBanner from './modules/HeaderBanner';
import LineChart from './modules/LineChart';
import PieChart from './modules/PieChart';
import ProjectNews from './modules/ProjectNews';

const handleQuery = () => {
  console.log('==handleQuery=========');
};

export function Component() {
  const handleQuery2 = (mgs: string) => {
    console.log(`========handleQuery2===${mgs}`);
  };

  return (
    <ASpace
      className="w-full"
      direction="vertical"
      size={[16, 16]}
    >
      <Flex
        wrap
        gap="small"
      >
        <Button
          type="primary"
          onClick={handleQuery}
        >
          Primary Button
        </Button>
        <Button
          type="primary"
          onClick={() => handleQuery2('Your message')}
        >
          Primary Button
        </Button>
        <Button type="dashed">Dashed Button</Button>
        <Button type="text">Text Button</Button>
        <Button type="link">Link Button</Button>
      </Flex>
      <HeaderBanner />
      <CardData />

      <ARow gutter={[16, 16]}>
        <ACol
          lg={14}
          span={24}
        >
          <LineChart />
        </ACol>
        <ACol
          lg={10}
          span={24}
        >
          <PieChart />
        </ACol>
      </ARow>

      <ARow gutter={[16, 16]}>
        <ACol
          lg={14}
          span={24}
        >
          <ProjectNews />
        </ACol>
        <ACol
          lg={10}
          span={24}
        >
          <CreativityBanner />
        </ACol>
      </ARow>
    </ASpace>
  );
}
